<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>我的图库</title>
    <jsp:include page="../body/link-page.jsp" flush="true"/>
    <jsp:include page="../body/javascript-page.jsp" flush="true"/>
    <script type='text/javascript' src="${basePath}/static/js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>
</head>
<body>
<div class="panel">
    <form id="form" action="/picture/list" method="post">
        <div class="panel-heading row">
            <div class="col-md-8">
                <button type="button" id="demo-dt-addrow-btn" class="btn btn-info" onclick="LAYER.addLay('layer_userAdd','添加','/picture/add')"><i class="fa fa-plus"></i> 添加</button>
            </div>

            <div class="col-md-4">
                <div class="input-group" style="text-align: right">
                    <div class="input-group-addon">
                        <span class="fa fa-search"></span>
                    </div>
                    <input type="text" name="search" id="search" class="form-control col-md-3"
                           placeholder="搜索图片的名称或大小"/>
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-primary btn-search">搜索</button>
                        <button type="button" class="btn btn-primary btn-resert" style="margin-left: 3px;">重置</button>
                    </div>
                </div>
            </div>

        </div>

        <div id="table-box" class="panel-body">
            <table id="table" class="table table-striped table-bordered dataTable no-footer dtr-inline" cellspacing="0"
                   width="100%" role="grid" aria-describedby="demo-dt-addrow_info" style="width: 100%;"
                   data-pn="${page.pageNum}" data-ps="${page.pageSize}" data-tp="${page.totalPage}"
                   data-tr="${page.totalRecord}">
                <tbody>
                    <c:choose>
                        <c:when test="${not empty page.results}">
                            <div class="gallery" id="links">
                                <c:forEach items="${page.results}" var="pic">
                                    <a class="gallery-item" href="${pic.picUrl}" title="${pic.name}" data-gallery>
                                        <div class="image">
                                            <img src="${pic.picUrl}" alt="${pic.name}" style="max-width:100%; height:210px;"/>
                                            <ul class="gallery-item-controls">
                                                <li><span class="gallery-item-remove" id="${pic.id}"><i class="fa fa-times"></i></span></li>
                                            </ul>
                                        </div>
                                        <div class="meta">
                                            <strong>${pic.name}</strong>
                                            <span>${pic.imgSize}KB</span>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:when>
                        <c:otherwise>
                            <tr>
                                <td colspan="10" style="text-align: center">暂无数据</td>
                            </tr>
                        </c:otherwise>
                    </c:choose>
                </tbody>
            </table>
            <ul class="pagination"></ul>

            <script type="text/javascript">
                $(".gallery-item-remove").on("click",function(){
                    deleteImg(this.id);
                    return false;
                });
            </script>
        </div>
        <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
            <div class="slides"></div>
            <h3 class="title"></h3>
            <a class="prev">‹</a>
            <a class="next">›</a>
            <a class="close">×</a>
            <a class="play-pause"></a>
            <ol class="indicator"></ol>
        </div>
    </form>
</div>

</body>

<script>
    function deleteImg(id) {
        $.ajax({
            type: "POST",
            url: "/picture/deleteById",
            data: {"picId": id},
            dataType: "JSON",
            async:true,
            success: function (data) {
                if (data.success) {
                    layer.msg("删除成功", {icon: 1, time: 700});
                    reloadPage();
                } else {
                    layer.msg(data.msg, {icon: 2, time: 1000});
                }
            },
            error: function () {
                layer.msg("删除未成功", {icon: 0, time: 1000});
            }
        });
    }
</script>
</html>
